<template>
	<view>
		<view class="content">
			<view class="content_list" v-for="(item,index) in dataList" :key="index">
				<view class="content_list_top"></view>
				<view class="content_list_con">
					<view class="content_list_con_num">
						{{item.interestAmount}}
						<view class="content_list_con_nam">元</view>
					</view>
					<view class="content_list_con_solid"></view>
					<view class="content_list_con_center">
						<view class="content_list_con_tit">{{item.goodsName}}</view>
						<view class="content_list_con_date">有效期：{{item.startTime}}-{{item.endTime}}</view>
					</view>
					<view v-if="item.status=='0'" class="content_list_con_but" @click="viewData(item)">去查看</view>
					<view v-if="item.status=='1'" class="content_list_con_buts">已过期</view>
				</view>
				<view class="content_list_bot"></view>
				<view class="imgs" v-if="item.status=='1'">
					<image src="../../static/expired.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="foot_but">
			<view class="foot_but_tit" @click="logout()">退出登录</view>
			<view class="foot_but_tit">｜</view>
			<view class="foot_but_tit" @click="customerService('center')">联系客服</view>
		</view>
		<view>
			<uniPopup ref="alertDialog" type="center" background-color="#fff">
				<view class="popups">
					<view class="codes">
						<view class="codes_img">
							<image src="../../static/qrcode.jpg" mode=""></image>
						</view>
					</view>
					<view class="codes_tit">长按扫码添加客服微信</view>
				</view>
			</uniPopup>
		</view>
	</view>
</template>

<script>
	import uniPopup from "../components/uni-popup/components/uni-popup/uni-popup.vue"
	export default {
		components:{uniPopup},
		data() {
			return {
				type: 'center',
				token:'',
				dataList: []
			}
		},
		onLoad() {
			this.token = uni.getStorageSync("token");
			this.queryUserCouponList()
		},
		methods: {
			queryUserCouponList(){
				uni.request({
					url: "/api/h5/queryCouponList",
					method: 'GET',
					header:{
						"token":this.token
					},
					success:(res)=> {
						if (res.data.code == 200) {
							this.dataList = res.data.data
						}else if (res.data.code == 500) {
							uni.showToast({
								title:res.data.msg,
								icon:'error'
							})
						} else if(res.data.code==999){
							uni.showToast({
								title:res.data.msg,
								icon:'error'
							})
							uni.redirectTo({
								url: '/pages/index/index',
							})
							uni.removeStorageSync("token");
						}else {
							uni.showToast({
								title:res.data.msg,
								icon:'error'
							})
						} 
					},
					fail:(err)=> {
						uni.showToast({
							title:'获取兑换码异常',
							icon:'error'
						})
					}
				})
			},
			// 查看
			viewData(data) {
				//数据存储到storage 跳转至详情
				uni.setStorage({key:"data",data:data,success:()=>{
					uni.navigateTo({
						url: '/pages/myInterest/details',
					})
				}})
			},
			// 退出登录
			logout() {
				uni.request({
					url: "/api/h5/logout",
					method: 'POST',
					header:{
						"token":this.token
					},
					success:(res)=> {
						if (res.data.code == 200) {
							uni.removeStorageSync("token");
							uni.navigateTo({
								url: '/pages/index/index',
							})
						}else if (res.data.code == 500) {
							uni.showToast({
								title:res.data.msg,
								icon:'error'
							})
						} else {
							uni.showToast({
								title:res.data.msg,
								icon:'error'
							})
						} 
					},
					fail:(err)=> {
						uni.showToast({
							title:'退出登录异常',
							icon:'error'
						})
					}
				})
			},
			// 联系客服
			customerService(type) {
				this.$refs.alertDialog.open(type)
			},
		}

	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss">
	.content {
		padding: 0 24rpx;
	}

	.content_list {
		width: 100%;
		height: 168rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: linear-gradient(270deg, #FFEDEA 0%, #FFFFFF 100%);
		margin-top: 24rpx;
		overflow: hidden;
	}

	.content_list_con {
		height: 104rpx;
		width: 100%;
		margin: 4rpx 0;
		display: flex;
		align-items: center;
	}

	.content_list_top {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		line-height: 24rpx;
		border: 1px solid #FFA99C;
		margin-left: 148rpx;
		position: relative;
		top: -12rpx;
	}

	.content_list_bot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		line-height: 24rpx;
		border: 1px solid #FFA99C;
		margin-left: 148rpx;
		position: relative;
		bottom: -20rpx;
	}

	.content_list_con_num {
		width: 144rpx;
		height: 104rpx;
		line-height: 104rpx;
		opacity: 1;
		margin-left: 8rpx;
		font-size: 48rpx;
		letter-spacing: 0px;
		color: #FF5745;
		display: flex;
		align-content: center;
		justify-content: center;
		font-weight: bold;
	}

	.content_list_con_nam {
		font-size: 14px;
		font-weight: normal;
		height: 100rpx;
		line-height: 100rpx;
		letter-spacing: 0px;
		color: #FF5745;
		margin-top: 4rpx;
		font-weight: bold;
		margin-left: 4rpx;
	}

	.content_list_con_solid {
		width: 0px;
		height: 104rpx;
		opacity: 1;
		border-left: 1px solid #FFA99C;
		margin-left: 10rpx;
	}

	.content_list_con_center {
		margin-left: 24rpx;
	}

	.content_list_con_tit {
		height: 46rpx;
		opacity: 1;
		font-size: 32rpx;
		line-height: 46rpx;
		color: #3D3D3D;
		font-weight: bold;
	}

	.content_list_con_date {
		font-size: 22rpx;
		line-height: 32rpx;
		color: #999999;
		height: 32rpx;
		margin-top: 16rpx;
	}

	.content_list_con_but {
		width: 136rpx;
		height: 56rpx;
		font-size: 32rpx;
		color: #ffffff;
		background-image: linear-gradient(270deg, #FF5745 0%, #FF8042 100%);
		line-height: 56rpx;
		border-radius: 48rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: normal;
		color: #FFFFFF;
		margin-left: 24rpx;
	}

	.content_list_con_buts {
		width: 136rpx;
		height: 56rpx;
		font-size: 32rpx;
		color: #ffffff;
		background: linear-gradient(270deg, #FF5745 0%, #FF8042 100%);
		line-height: 56rpx;
		border-radius: 48rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-left: 24rpx;
		opacity: 0.5;
	}

	.imgs {
		width: 96px;
		height: 96px;
		right: 16px;
		overflow: hidden;
		bottom: 0;
		margin-top: -81px;
		float: right;
	}

	.imgs image {
		width: 180rpx;
		height: 180rpx;
	}

	.foot_but {
		width: 100%;
		height: 112rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	}

	.foot_but_tit {
		height: 40rpx;
		opacity: 1;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #999999;
	}

	.popups {
		padding: 20px;
		margin: 0 auto;
	}

	.codes {
		width: 280rpx;
		height: 280rpx;
		border-radius: 12px;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #333333;
		margin: 0 auto;
		padding: 20rpx;
	}

	.codes_img {
		width: 240rpx;
		height: 240rpx;
	}

	.codes_img image {
		width: 240rpx;
		height: 240rpx;
	}

	.codes_tit {
		height: 46rpx;
		opacity: 1;
		font-size: 32rpx;
		line-height: 46rpx;
		color: #333333;
		text-align: center;
		margin-top: 40rpx;
	}
</style>